<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Kwh">
        <meta charset="utf-8">
        <script src="../js/jquery-3.1.1.js"></script>
        <title></title>
        <style>
        body{
            height: 4000px;
        }
            ul{
                width: 100px;
                height: 80px;
                list-style: none;
                margin: 0;
                padding: 0;
                position: fixed;
                right: 0;
                top:45%;
                cursor: pointer;
            }
            ul li{
                width: 100px;
                height: 40px;
            }
            #img1{
                width: 15px;
                height: 40px;
                background-image: url(../img/scroll.png);
                background-repeat: no-repeat;
                background-position: 0 0;
                position: absolute;
                right: 0;
                 opacity: 1;
            }
            #img2{
                width: 15px;
                height: 40px;
                background-image: url(../img/scroll.png);
                background-repeat: no-repeat;
                background-position: 0 -80px;
                position: absolute;
                right: 0;
                opacity: 1;
            }
            #top{
                width: 100px;
                height: 40px;
                background-color: #D03F42;
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
                font-size: 18px;
                color: white;
                text-align: center;
                line-height: 2;
                opacity: 0;
            }
            #bottom{
                width: 100px;
                height: 40px;
                background-color: #383838;
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
                font-size: 18px;
                color: white;
                text-align: center;
                line-height: 2;
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <div id="img1" class="img"></div>
                <div id="top" class="fan">返回顶部</div>
            </li>
            <li>
                <div id="img2" class="img"></div>
                <div id="bottom" class="fan">转到底部</div>
            </li>
        </ul>
    </body>
</html>


<script>
    
    $('ul li').hover(function(){
        $(this).children('.img').stop().animate({
            opacity:0
        })
        $(this).children('.fan').stop().animate({
            opacity:1
        })

    },function(){
        $(this).children('.img').stop().animate({
            opacity:1
        })
        $(this).children('.fan').stop().animate({
            opacity:0
        })
    })

    $('#top').click(function(){
        $('body').animate({
            scrollTop:0
        },1000);
    })

    $('#bottom').click(function(){
        $('body').animate({
            scrollTop:$('body').height()
        },1000);
    })




</script>